<template>
  <div>
    <!-- 
    在vue中使用vue-router，会给我们生成两个组件
    router-link: 实现页面调换
        它会默认给我们生成一个a标签，也可以通过tag属性，指定具体生成的标签,它会给生成的标签绑定onclick事件，
          在onclick事件内部使用this.$router.push(编程式导航)方式进行跳转的
    实现原理:
        1.默认生成a标签
        2.给当前a标签绑定点击事件
        3.禁止a标签的默认事件,防止他自动跳转
        4.在点击事件内部,调用编程式导航this.$router.push方法
    router-view
      实现原理:
        1.声明当前组件是router-view组件
        2.通过depth变量,记录当前是几级路由
            (通过while循环,从当前组件往上找,看遇到了几个rouiter-view,直至找到路由根组件为止)
        3. 先提取出当前的路由注册表对象所有的key(也就是所有注册的路径),得到有路由路径组成新的mapRtouer
        4.获取档期地址路径，根据当前的路由地址,搜索出所有路径相似的路由,获取到对应的组件
        5.将对应的组件通过createElement方法,生成虚拟DOM
    
    hash
      通过window.onhashchange来监听路径的变化
      push
        使用window.location.assign实现跳转
      replace
        使用window.location.replace实现跳转

    history
      通过window.onpopstate来监听路径的变化
      push
         使用window.history.pushState实现跳转
      replace
         使用window.history.replaceState实现跳转

   -->
    <div>
      <router-link to="/home">去Home页</router-link>&nbsp;&nbsp;&nbsp;&nbsp;
      <router-link to="/about">去About页</router-link>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped></style>
